<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏大厅</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/game_hall.css">
</head>

<body>
    <div class="nav">五子棋对战</div>
    <!-- 整个页面的容器元素 -->
    <div class="container">
        <!-- 这个 div 在 container 中是处于垂直水平居中这样的位置的 -->
        <div>
            <!-- 展示用户信息 -->
            <div id="screen"></div>
            <!-- 匹配按钮 -->
            <button id="button" onclick="fun()">开始匹配</button>
            <button id="button1" onclick="machine()">人机对战</button>
        </div>
    </div>
    <script src="js/jquery.min.js"></script>
    <script>
        jQuery.ajax({
            url: "/user/getUser",
            type: "POST",
            data: {},
            success: function (result) {
                var screen = jQuery('#screen');
                screen.html("玩家:" + result.data.username + "分数:" + result.data.score + "</br>" +
                    "比赛场次:" + result.data.totalcount + "胜利场次:" + result.data.wincount);
            }
        });

        var websocket = new WebSocket("ws://127.0.0.1:8080/text");
        websocket.onclose = function () {
            console.log("连接关闭");
        }
        websocket.onerror = function () {
            console.log("连接错误");
        }
        websocket.onopen = function () {
            console.log("连接成功");
        }
        window.onbeforeunload = function () {
            websocket.close;//当关闭页面的时候,自动关闭websocket连接
        }
        //连接返回的数据
        websocket.onmessage = function (e) {
            var resp = JSON.parse(e.data);//对象转为json对象
            var match = jQuery('#button');
            console.log(resp);
            if (!resp.ok) {
                alert("获取数据发生错误");
            }
            if (resp.message == 'statrmatch') { //返回申请匹配成功的响应
                console.log("申请匹配成功");
                match.html('匹配中...(取消匹配)');
            } else if (resp.message == 'stopmatch') {//申请取消匹配的响应
                console.log("取消匹配");
                match.html('开始匹配');
            } else if (resp.message == 'matchsuccess') { //匹配到对手时返回的响应
                console.log("匹配对手成功");
                location.replace('/game_room.html');
            } else if(resp.message == 'machine') {//匹配人机时返回的响应
                location.replace('/machine_room.html');
            }else if (resp.message == 'noshuang') {
                alert('禁止双开');
                location.href = '/login.html';
            } else {
                console.log("非法响应");
            }
        }
        function fun() {
            if (websocket.readyState == websocket.OPEN) { // 在点击匹配按钮的时候判断连接是否正常
                var match = jQuery('#button');
                console.log(match.text());
                if (match.text() == '开始匹配') {
                    //发送匹配请求给后端
                    console.log("发送匹配请求");
                    websocket.send(JSON.stringify({ message: "statrmatch" }));//匹配请求
                } else if (match.text() == '匹配中...(取消匹配)') {
                    //发送取消匹配请求给后端
                    console.log("发送取消匹配请求");
                    websocket.send(JSON.stringify({ message: "stopmatch" }));
                } else {
                    console.log("函数错误");
                }
            } else {
                alert('登录异常请重新登录');
                location.href = '/login.html';
            }
        }

        function machine() {
            if (websocket.readyState == websocket.OPEN) { // 在点击匹配按钮的时候判断连接是否正常
                var match = jQuery('#button1');
                if (match.text() == '人机对战') {
                    console.log("发送人机匹配请求");
                    websocket.send(JSON.stringify({ message: "machine" }));//人机匹配请求
                } else if (match.text() == '取消对战') {
                    console.log("取消人机匹配请求");
                    websocket.send(JSON.stringify({ message: "stopmachine" }));//取消人机匹配请求
                } else {
                    console.log("函数错误");
                }
            }else {
                alert('登录异常请重新登录');
                location.href = '/login.html';
            }
        }
    </script>
</body>

</html>